The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs. Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the "root element", it applies to the viewport instead. This property specified on the "body element" will not propagate to the viewport.

The easiest way to add a smooth scroll animation is to set the scroll behavior property in CSS –e.g. body { scroll-behavior: smooth }

auto: the scrolling box scrolls instantly;
smooth: the scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

setting scroll behavior with CSS

smooth scroll behavior

"scroll-behavior" property

scrolling text

The power of anchors

Introduction
Conclusion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis justo ex, nec commodo metus pellentesque quis. Suspendisse lobortis eros elit, nec consequat sem posuere et. Aenean varius facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit. Donec accumsan placerat massa quis egestas. Praesent vitae maximus nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus in metus quis eros gravida finibus in sit amet elit. Maecenas eu sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at augue. Etiam eu faucibus sem.

Mauris nec magna nisi. Maecenas nec leo ullamcorper tellus eleifend lobortis. Nulla risus orci, porta non diam vitae, posuere efficitur risus. Sed lorem dolor, imperdiet quis condimentum in, posuere quis arcu. Aliquam ex ligula, blandit non elementum non, molestie at metus. Duis vestibulum facilisis leo bibendum vestibulum. Integer ac justo augue. Integer mi turpis, porttitor sit amet orci nec, convallis egestas tortor. Duis convallis sapien ut lorem convallis, nec tristique eros sodales. Quisque placerat elit vel quam condimentum, quis fermentum risus elementum. Donec eget tincidunt nisl, nec laoreet massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at faucibus ligula. Ut eu rhoncus tellus.

Introduction

Aliquam pretium lacus a ex tincidunt, et aliquet magna feugiat. Suspendisse sagittis condimentum pretium. Aenean a scelerisque arcu, consequat aliquet felis. Cras dictum nulla nec odio tincidunt faucibus. Nullam nec fermentum elit. Duis in velit vitae felis euismod dignissim ullamcorper non nisl. Nullam malesuada faucibus malesuada. Duis sem velit, viverra et diam tempus, convallis sodales orci. Mauris gravida eros at lorem varius dignissim. Vivamus nec nibh lorem.

Curabitur aliquet leo mi, non molestie orci mollis ut. Curabitur pretium, turpis rutrum tempus mattis, ex tellus lobortis sapien, vel vehicula urna purus ut ex. Sed at nisl sit amet nibh auctor hendrerit quis non est. Praesent hendrerit dui consectetur nisi lacinia, tincidunt scelerisque nunc condimentum. Etiam imperdiet nibh sed orci efficitur auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec scelerisque neque quis lacus facilisis elementum. Sed nisl justo, vulputate non diam id, ornare luctus ligula. Praesent metus felis, feugiat non sapien eget, commodo aliquet risus. Integer congue lacinia nulla, ut vulputate augue. Suspendisse risus ex, eleifend at velit eget, ultricies hendrerit sem. Integer sit amet tincidunt erat, sed convallis sem.

Conclusion

Nam tristique mi eu lectus rutrum, vel porta magna pharetra. Vestibulum dictum leo dolor, non sagittis arcu elementum nec. Cras commodo erat sit amet dolor efficitur, a eleifend libero ultrices. Vivamus facilisis bibendum posuere. Etiam ornare massa sit amet blandit pharetra. Ut vel egestas mi. Duis tempor massa elit. Nulla nec neque magna. Vestibulum posuere facilisis justo, egestas vulputate neque pellentesque sit amet.

Javascript - smooth roll

scroll to a certain position

legacy JavaScript smooth scroll

scrollbars - introduction

The scrollbar set of CSS properties is a proprietary style hook letting designers create custom themes for the browser's native scrollbars.

Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar:

::-webkit-scrollbar: the scrollbar.
::-webkit-scrollbar-button: the buttons on the scrollbar (arrows pointing upwards and downwards).
::-webkit-scrollbar-thumb: the draggable scrolling handle.
::-webkit-scrollbar-track: the track (progress bar) of the scrollbar.
::-webkit-scrollbar-track-piece: the track (progress bar) NOT covered by the handle.
::-webkit-scrollbar-corner: the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
::-webkit-resizer: the draggable resizing handle that appears at the bottom corner of some elements.

scrollbar applications

apply the pseudo element

hide scrollbars

customize srollbars

always show scrollbars

scroll-driven animations

diagonal scroll

scrolling on Apple devices

Apple devices use the WebKit engine (Safari). Even Chrome and Firefox on iOS use WebKit under the hood. To ensure smooth, "native-feeling" scrolling, you must optimize for this engine.

1. CSS optimizations

Enable hardware acceleration: force the browser to use the GPU for scrolling elements.

Use "overscroll-behavior": prevents the "rubber-banding" effect from triggering unwanted navigation or refreshes.

Fix the "100vh" issue: on iOS Safari, "100vh" includes the address bar, causing jumpiness when scrolling. Use the new dynamic viewport units:

Avoid "position: fixed" on the body: if you need to lock scrolling (e.g., for a modal), do not set "position: fixed" on the <:body>. Instead, toggle a class that sets "overflow: hidden" and save/restore the scroll position via JS.

Legacy touch scrolling: while mostly automatic now, adding this ensures momentum scrolling on older iOS versions (iOS 12 and below).

2. JavaScript best practices

Passive event listeners: this is the most critical JS optimization. By default, iOS waits to see if your scroll event listener calls "preventDefault()". Marking it as passive tells the browser "I won't stop the scroll," allowing it to scroll immediately.

Debounce or throttle: Never run heavy calculations inside a scroll event. Use "requestAnimationFrame" or a throttle function to limit how often your code runs.

Use intersection observer: instead of listening to scroll events to detect when elements come into view (for lazy loading or animations), use the IntersectionObserver API. It is much more performant.

Avoid layout thrashing: do not read and write to the DOM within the same scroll frame. This forces the browser to recalculate layout constantly, causing jank.

3. Asset & render management

Optimize images: large images are the #1 cause of scroll lag. Use WebP or AVIF formats and implement lazy loading.

Font loading: use "font-display: swap" in your CSS to prevent text from being invisible while fonts load, which can shift layout during scroll.

4. Safari-specific quirks

Fixed headers: fixed navigation bars can sometimes flicker on iOS. Ensure they have a background color with opacity (e.g., "rgba(255,255,255,0.9)") rather than transparent, or use "backdrop-filter: blur()".

Input focus: when a user taps an input field, iOS zooms in if the font size is under 16px. Set "font-size: 16px" on inputs to prevent this zoom, which disrupts scroll position.

scrolling and scrollbars

Content

definition and usage